import React from "react";
import Carousel from "./index";
import {
  	withKnobs,
	number,
	text,
	boolean,
	color,
	select,
} from "@storybook/addon-knobs";

export default {
	title: "组件/Carousel",
	component: Carousel,
	decorators: [withKnobs],
};

const DivExample = function(height: number, index: number) {
	return (
		<div
		style={{
			background: "#364d79",
		}}
			key={index}
		>
		<span
			style={{
			lineHeight: `${height}px`,
			color: "white",
			fontSize: "20px",
			fontWeight: 800,
			width: "100%",
			textAlign: "center",
			display: "inline-block",
			}}
		>
			{index + 1}
		</span>
		</div>
	);
};

export const knobsCarousel = () => {
	const height = number("height", 300);
	const num = number("item number", 4);
	return (
		<Carousel
		delay={number("delay", 300)}
		height={height}
		radioAppear={select(
			"radioAppear",
			Object.keys(color) as Array<keyof typeof color>,
			"primary"
		)}
		defaultIndex={number("defaultIndex", 0)}
		autoplay={boolean("autoplay", true)}
		viewportBoxshadow={text("viewportBoxshadow", "2px 2px 4px #d9d9d9")}
		autoplayReverse={boolean("autoplayReverse", false)}
		animationDelay={number("animationDelay", 500)}
		autoplayDelay={number("autoplayDelay", 5000)}
		>
		{new Array(num).fill(height).map((v, i) => DivExample(v, i))}
		</Carousel>
	);
};